<template>
  <div class="yrfm-aside aside-all">
    <div class="search-header">
      <el-input v-model="searchInput" size="small" placeholder="输入搜索关键字" @keyup.13.native="onSearch">
        <i class="el-icon-close" slot="suffix" @click="clearSearch" v-if="searchInput.length"></i>
        <el-button type="primary" slot="append" icon="el-icon-search" @click="onSearch"></el-button>
      </el-input>
    </div>
    <el-collapse v-model="activeCollapse" accordion v-if="groupList.length || loading">
      <el-collapse-item v-for="(item, index) in groupList" :key="item.type" :name="item.type">
        <div slot="title" class="group-title">
          <i
            class="icon-toggle"
            :class="activeCollapse === item.type ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
          ></i>
          <span class="name">{{ item.title }}</span>
        </div>
        <div class="data-list">
          <template v-if="item.page.results.length">
            <ul class="list-wrap">
              <li
                class="list-item"
                :class="{ 'is-active': tag.tagId === selectData.tagId }"
                v-for="tag in item.page.results"
                :key="tag.tagId"
                @click="selectItem(tag)"
              >
                <i class="el-icon-s-custom"></i>
                <span class="list-name elli">{{ tag.rfmAnalysisName }}</span>
                <i class="el-icon-success" v-if="tag.fileStatus === 1"></i>
                <i class="el-icon-stopwatch" v-if="tag.fileStatus === 0"></i>
                <i class="el-icon-error" v-if="tag.fileStatus === 2"></i>
              </li>
            </ul>
            <el-pagination
              style="text-align: right"
              :current-page="item.page.params.currentPageNum"
              :page-size="item.page.params.pageSize"
              background
              layout="total, prev, pager, next"
              :total="item.page.totalSize"
              :pager-count="5"
              small
              @current-change="handleCurrentChange($event, index)"
            >
            </el-pagination>
          </template>
          <div class="no-record" v-else>
            <img src="~@/assets/img/no_records.png" /><br />
            暂无内容
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="no-record" v-else>
      <img src="~@/assets/img/no_records.png" /><br />
      暂无内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      searchInput: '',
      searchKey: '',
      activeCollapse: 1,
      groupList: [
        {
          type: 1,
          title: '我发布的',
          page: {
            results: [],
            params: {
              currentPageNum: 1,
              pageSize: 10
            },
            totalSize: 0
          }
        },
        {
          type: 2,
          title: '其他',
          page: {
            results: [],
            params: {
              currentPageNum: 1,
              pageSize: 10
            },
            totalSize: 0
          }
        }
      ],
      selectData: {}
    }
  },
  created() {
    this.getDataList()
  },
  watch: {
    activeCollapse() {
      this.selectItem()
      if (this.activeCollapse !== '') {
        this.getDataList()
      }
    }
  },
  methods: {
    getDataList() {
      let group = this.groupList.find(item => item.type === this.activeCollapse)
      if (group) {
        let params = group.page.params
        this.loading = true
        this.$ajax({
          url: this.$ajax.setUrl('rfmAnalysis/selectRfmAnalysisAll'),
          method: 'get',
          params: this.$ajax.setParams({
            currentPageNum: params.currentPageNum,
            pageSize: params.pageSize,
            queryParams: {
              type: group.type,
              tagNm: this.searchKey
            }
          })
        }).then(({ data }) => {
          if (data && data.code === '0') {
            group.page.results = data.data.records
            group.page.totalSize = data.data.totalSize
            let maxPageNum = Math.ceil(data.data.totalSize / params.pageSize) || 1
            if (params.currentPageNum > maxPageNum) {
              params.currentPageNum = maxPageNum
              this.getDataList()
            } else {
              if (data.data.records.length > 0) {
                if (this.selectData.tagId) {
                  let target = data.data.records.find(item => item.tagId === this.selectData.tagId)
                  if (target) {
                    this.selectItem(target)
                  } else {
                    this.selectItem(data.data.records[0])
                  }
                } else {
                  this.selectItem(data.data.records[0])
                }
              } else {
                this.selectItem()
              }
            }
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.loading = false
        })
      }
    },
    onSearch() {
      this.searchKey = this.searchInput.trim()
      if (this.activeCollapse) {
        this.getDataList()
      } else {
        this.activeCollapse = 1
      }
    },
    clearSearch() {
      this.searchInput = ''
      if (this.searchKey !== '') {
        this.onSearch()
      }
    },
    handleCurrentChange(num, index) {
      this.groupList[index].page.params.currentPageNum = num
      this.selectItem()
      this.getDataList()
    },
    selectItem(data = {}) {
      this.selectData = data
      this.$emit('selectData', data)
    }
  }
}
</script>

<style lang="scss">
.tag-yrfm {
  .yrfm-aside.aside-all {
    .search-header {
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>
